<template>
  <div class="page-container">
    <div class="title">Table 表格</div>
    <div class="desc">用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</div>

    <jhb-table
        :tableData="tableData"
        :tableHeader="tableHeader"
        @cell-events="cellClick"
        @size-change="sizeChanges"
        @current-change="currentChanges"
      >
    </jhb-table>
  </div>
</template>

<script>
import jhbTable from "pkgs/JHB-table/src";
export default {
  components: {
    jhbTable,
  },
  data() {
    return {
      tableData: [
        {
          name: "小鱼儿",
          userNo: "百盛集团",
          memberGrade: "集团商家",
          age: "小李",
          phone: "2021-07-30"
        },
        {
          name: "000002",
          userNo: "百盛集团",
          memberGrade: "集团商家",
          age: "小李",
          phone: "2021-07-30"
        },
        {
          name: "000003",
          userNo: "百盛集团",
          memberGrade: "集团商家",
          age: "小李",
          phone: "2021-07-30"
        },
        {
          name: "000004",
          memberGrade: "百盛集团",
          userNo: "集团商家",
          age: "小李",
          phone: "2021-07-30"
        },
      ],
      tableHeader: [
        // 表头信息
        {
          prop: "userNo",
          label: "商家MID",
          width: "120px",
          cellClick: true,
        },
        {
          prop: "name",
          label: "商家简称",
          width: "120px",
        },
        {
          prop: "memberGrade",
          label: "商家类型",
          width: "120px",
        },
        {
          prop: "age",
          label: "拓展员",
          width: "120px"
        },
        {
          prop: "phone",
          label: "注册时间"
        },
        {
          prop: "operation",
          label: "操作",
          fixed: "right",
          width: "300px",
          operation: [
            {
              name: "详情",
              clickFun: this.sizeChanges,
            },
            {
              name: "修改密码",
              clickFun: this.sizeChanges,
            },
            {
              name: "修改权限",
              clickFun: this.sizeChanges,
            },
            {
              name: "删除",
              clickFun: this.sizeChanges,
            },
          ],
        },
      ],
    };
  },
  methods: {
    cellClick(row) {
      this.dialog.Visible = true;
      console.log("固定列操作返回", row);
    },
    sizeChanges(row) {
      console.log("固定列操作返回", row);
    },
    currentChanges(row) {
      console.log("固定列操作返回", row);
    },
  },
};
</script>

<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 28px;
      font-weight: 400;
      color: #1f2f3d;
    }
    .desc {
      font-size: 14px;
      color: #5e6d82;
      padding: 14px 0;
      border-bottom: 1px solid #ebebeb;
      margin-bottom: 20px;
    }
    .item-title {
      font-size: 20px;
      margin: 26px 0;
      font-weight: 400;
      color: #1f2f3d;
    }
    .item-title:first-child {
      margin-top: 0;
    }
    .page-item {
      display: flex;
      // justify-content: space-between;
      align-items: center;
    }
  }
</style>
